'use strict';

import React, { Component } from 'react';
import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
import { Relax } from 'iflux2';

@Relax
export default class FilterItem extends Component {
  static defaultProps = {
	  selectItem:()=>{}
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    let { label, conditionList = [], addCondition } = this.props;
    let Component = addCondition && addCondition.reactDom ? addCondition.reactDom : null;
    return (
      <div className="filter-box">
        <span className="filter-title">{label}：</span>
        <RadioGroup onChange={this.selectItem} size="large">
          {conditionList.map((item, index) => {
            return <RadioButton checked={item.checked} value={item}>{item.label}</RadioButton>;
          })}
          {Component &&
            <Component
              {... addCondition.props}
              path={[this.props.index, 'conditionList', this.props.conditionList.length]}
            />}
        </RadioGroup>
      </div>
    );
  }
  
  selectItem = (e)=>{
  	let item = e.target.value;
  	let {value,key} = item;
  	this.props.selectItem({value,key});
  }
}
